<template>
	<view class="">
		<z-paging>
			<template #top>
				<view class="top flex justify-end my-12 mx-16" @click="record">申请记录 ></view>
			</template>
			<view class="agent-box" v-if="detail.id">
				<view class="title mb-12">上级经纪人</view>
				<view class="flex">
					<image :src="detail.avatar" mode="" class="img-avatar"></image>
					<view class="agent-info flex item-center justify-between">
						<view>
							<view class="nick-name">{{detail.nickName}}</view>
							<view v-if="detail.commissionRate" class="tip mt-4">专属{{ detail.commissionRate }}%</view>
						</view>
						<view v-if="detail.state === 1" class="btn" @click="cancel">解除关联</view>
						<view v-else class="btn">解除申请中</view>
					</view>
				</view>
			</view>
      <view v-else>
        <view class="flex item-center justify-center">暂无上级经纪人</view>
      </view>
		</z-paging>
		<contentPop ref="contentPopRef" showTitle @onSubmit="onSubmit"></contentPop>
	</view>
</template>

<script setup>
  import {ref} from 'vue';
	import {myParentAgent, agentUnBindApplyApi} from '@/pagesD/api/agent.js'
	import contentPop from '../../merchantList/components/contentPop.vue'
	import {onShow} from '@dcloudio/uni-app'
	const triggered = ref(false)
	const contentPopRef = ref()
	const detail = ref({})
	const record = () => {
		uni.navigateTo({
			url:`/pagesD/role/applicationRecords`
		})
	}
	const cancel = () => {
		contentPopRef.value.showPop(true)
	}
	const onSubmit = async (data) => {
		uni.showLoading({mask:true})
		let result = await agentUnBindApplyApi({
			id: detail.value.id,
			applyReason:data.refuseReason
		})
    uni.hideLoading()
		if(result){
			uni.showToast({
				title: '提交成功',
				icon: 'none'
			})
      setTimeout(function () {
        getParentAgent()
      }, 1500)
		}
	}
	const getParentAgent = async () => {
		uni.showLoading()
		let result = await myParentAgent()
		if (result) {
			detail.value = result
		}
		uni.hideLoading()
	}
  onShow(async () => {
    await getParentAgent()
  })
</script>

<style lang="scss" scoped>
	.top{
		font-size: 12px;
		color: #FA4543;
	}
	
	.title{
		font-weight: 600;
		font-size: 14px;
		color: #000000;
	}

	.agent-box {
		padding: 8px 12px;
		margin: 0 20px 12px;
		background-color: #ffffff;
		border-radius: 8px;

		.agent-info {
			width: calc(100% - 60px);
			margin-left: 10px;
		}

		.img-avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}

		.nick-name {
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
		}
		.tip{
			display: inline-block;
			color: #FCB513;
			font-size: 10px;
			padding: 0 4px;
			border-radius: 4px;
			border: 1px solid #FCB513;
			white-space: nowrap;
		}
		.btn{
			border-radius: 15px 15px 15px 15px;
			border: 1px solid rgba(51,51,51,0.6);
			padding: 2px 12px;
			font-size: 12px;
			color: rgba(51,51,51,0.6);
		}
	}
</style>